<template>
  <div>
    <page-main>
      <el-table :data="tableData" border height="50vh">
        <el-table-column label="计划名称" prop="plan_name"></el-table-column>
        <el-table-column label="计划时间" prop="plan_time"></el-table-column>
        <el-table-column label="完成时间" prop="submit_time" :formatter="formatterTime"></el-table-column>
        <!-- <el-table-column label="合同开始时间" prop="star_time" :formatter="formatterTime"></el-table-column>
        <el-table-column label="合同结束时间" prop="end_time" :formatter="formatterTime"> </el-table-column> -->
        <el-table-column label="社会单位" prop="unit_name"> </el-table-column>
        <el-table-column label="维保单位" prop="wb_unit"> </el-table-column>
        <el-table-column label="超时（天）" prop="chaoshi"> </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          background
          layout="total,prev, pager, next, jumper"
          :page-count="tableDataInfo.last_page"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataInfo: ''
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    formatterTime(row, column, cellValue, index) {
      if (cellValue) return this.$getDateTime(cellValue)
      return '/'
    },
    getLists(page) {
      let pageNum = 1
      if (page) {
        pageNum = page
      }
      this.$api
        .get('/unit/Dashboard/monthPlan', {
          params: { page: pageNum, rows: 13 }
        })
        .then((res) => {
          this.tableData = res.data.data
          this.tableDataInfo = res.data
        })
    },
    handleCurrentChange(e) {
      this.getLists(e)
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
